<template>
  <div class="home">
    <myHeader/>
    <div class="content">
      <el-drawer
        custom-class="left-drawer"
        v-model="drawer"
        :direction="'ltr'"
        :before-close="handleClose"
        :show-close="false"
        :with-header="false"
        destroy-on-close
        :modal="false"
        :size="650"
        :z-index="0"
        modal-class="left-modal"
      >
        <LeftContnet/>
      </el-drawer>

      <el-drawer
        custom-class="right-drawer"
        v-model="drawer"
        :direction="'rtl'"
        :before-close="handleClose"
        :show-close="false"
        :with-header="false"
        destroy-on-close
        :modal="false"
        :size="650"
        :z-index="0"
        modal-class="right-modal"
      >
        <rightContnet/>
      </el-drawer>

      <div class="expand" @click="toggle">
        <img v-show="expand" src="@/assets/image/home/fold.png">
        <img v-show="!expand" src="@/assets/image/home/expand.png">
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { office } from "@/api";
import myHeader from "./components/header.vue";
import LeftContnet from "./components/leftContent/index.vue";
import rightContnet from "./components/rightContent/index.vue";

export default {
  name: "MessageSection",
  components: {
    myHeader,
    LeftContnet,
    rightContnet
  },
  setup() {
    const expand = ref(true);
    const drawer = ref(true);
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const click = async () => {
      console.log(store);
      let res = await office({});
      console.log(res);
    };

    const state = reactive({
      direction: "rtl"
    });

    const toggle = () => {
      expand.value = !expand.value;
      drawer.value = !drawer.value;
      console.log(drawer);
    };

    const handleClose = () => {
      drawer.value = false;
    };

    return {
      ...toRefs(state),
      click,
      expand,
      toggle,
      drawer,
      handleClose
    };
  }
};
</script>


<style lang="scss" scoped>
.home {
  .content {
    position: relative;
    padding: 0 34px;
    @include flex-between;
  }
  .expand {
    z-index: 1;
    position: absolute;
    top: 33px;
    right: 0;
  }
}
</style>


<style lang="scss">
.home {
  .left-drawer {
    top: 85px;
    left: 35px;
    height: 741px;
  }
  .right-drawer {
    top: 85px;
    right: 35px;
    height: 741px;
  }
  .el-drawer {
    background: none;
  }
  .left-modal{
    z-index: 1!important;
  }
  .right-modal{
    z-index: 0!important;
  }
}
</style>

